<article>
    <div class="module-identity-verification">
        <h3 class="ui-title">{{ $t('certification.verifyTitle') }}</h3>
        <help help-type="infoGray">
            <div slot="comp-help-content" class="comp-help-content">
                <div class="title">{{ $t('certification.verify.identity.tipTitle') }}</div>
                <div class="text">{{ $tc('certification.verify.identity.tip', 0) }}</div>
                <div class="text">{{ $tc('certification.verify.identity.tip', 1) }}
                    <a href="javascript:;" @click="isUnsupport=true" style="text-decoration:underline">{{ $t('certification.verify.identity.tipLink') }}</a></div>
            </div>
        </help>
        <unsupport v-if="isUnsupport" v-on:showflag="isUnsupport=false">
        </unsupport>

        <div class="form-box">
            <h3 class="ui-title ui-sub-title">{{ $t('certification.nameAndContact') }}</h3>
            <validator :rules="rules">
                <form class="m-form-page" name="form" action="javascript:;">
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="firstName">{{ $t('certification.firstName') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="firstName"
                                   class="fn-block"
                                   name="firstName"
                                   maxlength="100"
                                   autocomplete="off"
                                   :placeholder="$t('certification.firstName')"
                                   v-model="form.firstName">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label for="middleName">{{ $t('certification.middleName') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="middleName"
                                   class="fn-block"
                                   autocomplete="off"
                                   name="middleName"
                                   :placeholder="$t('certification.middleName')"
                                   v-model="form.middleName">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="lastName">{{ $t('certification.lastName') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="lastName"
                                   class="fn-block"
                                   autocomplete="off"
                                   name="lastName"
                                   :placeholder="$t('certification.lastName')"
                                   v-model="form.lastName">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label style="vertical-align: sub">{{ $t('certification.gender') }}:</label>
                        </div>
                        <div class="col-input">
                            <div class="gender">
                                <input type="radio"
                                       id="male"
                                       value="MALE"
                                       name="gender"
                                       v-model="form.gender"
                                       class="gender-input">
                                <label for="male" class="gender-label">{{ $tc('certification.genderOption', 1) }}</label>
                                <input type="radio"
                                       id="female"
                                       value="FEMALE"
                                       name="gender"
                                       v-model="form.gender"
                                       class="gender-input">
                                <label for="female" class="gender-label">{{ $tc('certification.genderOption', 2) }}</label>
                            </div>
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label>{{ $t('certification.birthday') }}:</label>
                        </div>
                        <div class="col-input">
                            <date-picker-new :defaut-start="'1990-01-01'"
                                            :start="form.birthday"
                                             :name="'birthday'"
                                             :option="birthOption"
                                             :limit="birthLimit"
                                             v-on:changeDay="changeBirthDay">
                            </date-picker-new>
                            <input type="hidden" name="birthday" v-model="form.birthday">
                            <div class="ui-tip"></div>
                        </div>
                    </div>

                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label>{{ $t('certification.nationality') }}:</label>
                        </div>
                        <div class="col-input">
                            <nationality :value="form.countryId"
                                         :name="'countryId'"
                                         v-on:changeCountry="changeCountry"></nationality>
                            <input type="hidden" name="countryId" :value="form.countryId">
                            <div class="ui-tip"></div>
                        </div>
                    </div>


                    <div style="margin-bottom:20px;border-bottom:1px dashed #e8e8e9;"></div>
                    <h3 class="ui-title ui-sub-title">{{ $t('certification.verify.identity.verifyTitle') }}</h3>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="cardType">{{ $t('certification.verify.identity.documentType') }}:</label>
                        </div>
                        <div class="col-input">
                            <select class="fn-block col-select"
                                    name="cardType"
                                    id="cardType"
                                    v-model="form.cardType">
                                <template v-if="$i18n.locale === 'hk' || $i18n.locale === 'cn'">
                                    <option v-for="item in lib.getIdTypeList($i18n.locale)" :value="item.val">{{item.label}}</option>
                                </template>
                                <template v-else>
                                    <option value="PASSPORT">Passport</option>
                                </template>
                            </select>

                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label for="cardNo">{{ $t('certification.verify.identity.documentNumber') }}:</label>
                        </div>
                        <div class="col-input">
                            <input type="text"
                                   id="cardNo"
                                   class="fn-block"
                                   autocomplete="off"
                                   name="cardNo"
                                   :placeholder="$t('certification.verify.identity.documentNumber')"
                                   v-model="form.cardNo">
                            <div class="ui-tip"></div>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label class="required">*</label><label>{{ $t('certification.verify.identity.expirationDate') }}:</label>
                        </div>
                        <div class="col-input">
                            <date-picker-new :start="form.expiredDate"
                                             :name="'expiredDate'"
                                             :option="expiredOption"
                                             :limit="expiredLimit"
                                             v-on:changeDay="changeExpiredDay">
                            </date-picker-new>
                            <input type="hidden" name="expiredDate" v-model="form.expiredDate">
                            <div class="ui-tip"></div>
                        </div>
                    </div>



                    <template v-if="form.cardType === 'PASSPORT'">
                        <div class="col-row">
                            <div class="col-label">
                                <label class="required" >*</label><label>{{ $t('certification.verify.identity.uploadedFiles') }}:</label>
                            </div>
                            <div class="col-input col-idcard">
                                <img class="idcard-left" :src="cardPhotoSrc"  alt="" width="200">
                                <div class="idcard-right">
                                    <div class="file-container">
                                        <file-upload class="my-file-uploader"
                                                     name="cardPhoto"
                                                     id="cardPhoto"
                                                     action="/exchangeApi/common/upload-photo/private"
                                                     v-on:onFileClick="onFileClick"
                                                     v-on:deleteFile="deleteFile"
                                                     v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                        </file-upload>
                                        <div class="ui-tip" v-if="cardPhotoTip">{{ $t('common.uploadTip') }}</div>
                                    </div>

                                    <p class="col-p">{{ $t('certification.verify.identity.uploadTipTitle') }}:</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip1') }}</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip2') }}</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip3') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.uploadTip4') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label class="required">*</label><label>{{ $t('certification.verify.identity.passportPhoto') }}:</label>
                            </div>
                            <div class="col-input col-idcard">
                                <img class="idcard-left" :src="cardHandholdSrc"  alt="" width="200">
                                <div class="idcard-right">
                                    <div class="file-container">
                                        <file-upload class="my-file-uploader"
                                                     name="cardHandhold"
                                                     id="cardHandhold"
                                                     action="/exchangeApi/common/upload-photo/private"
                                                     v-on:onFileClick="onFileClick"
                                                     v-on:deleteFile="deleteFile"
                                                     v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                        </file-upload>
                                        <div class="ui-tip" v-if="cardHandholdTip">{{ $t('common.uploadTip') }}</div>
                                    </div>

                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip1') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip2') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip3') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip4') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip5') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.photoTip6') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label>{{ $t('certification.verify.identity.passportTranslation') }}:</label>
                            </div>
                            <div class="col-input">
                                <div class="file-container">
                                    <file-upload class="my-file-uploader"
                                                 name="cardTranslate"
                                                 id="cardTranslate"
                                                 action="/exchangeApi/common/upload-photo/private"
                                                 multiple
                                                 v-on:deleteFile="deleteFile"
                                                 v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                    </file-upload>
                                </div>
                                <p class="col-p" style="white-space:nowrap; ">{{ $t('certification.verify.identity.passportTransTip') }}</p>
                            </div>
                        </div>
                    </template>

                    <template v-else>
                        <div class="col-row">
                            <div class="col-label">
                                <label class="required" >*</label><label>{{ $t('certification.verify.identity.idFront') }}:</label>
                            </div>
                            <div class="col-input col-idcard">
                                <img class="idcard-left" :src="cardPhotoSrc"  alt="" width="200">
                                <div class="idcard-right">
                                    <div class="file-container">
                                        <file-upload class="my-file-uploader"
                                                     name="cardPhoto"
                                                     id="cardPhoto"
                                                     action="/exchangeApi/common/upload-photo/private"
                                                     v-on:onFileClick="onFileClick"
                                                     v-on:deleteFile="deleteFile"
                                                     v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                        </file-upload>
                                        <div class="ui-tip" v-if="cardPhotoTip">{{ $t('common.uploadTip') }}</div>
                                    </div>

                                    <p class="col-p">{{ $t('certification.verify.identity.uploadTipTitle') }}:</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip1') }}</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip2') }}</p>
                                    <p class="col-p">· {{ $t('certification.verify.identity.uploadTip3') }}</p>
                                    <p class="col-p">{{ $t('certification.verify.identity.uploadTip4') }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-row">
                            <div class="col-label">
                                <label class="required" >*</label><label>{{ $t('certification.verify.identity.idBack') }}:</label>
                            </div>

                            <div class="col-input col-idcard">
                                <img class="idcard-left" :src="cardPhoto1Src" alt="" width="200">
                                <div class="idcard-right">
                                    <div class="file-container">
                                        <file-upload class="my-file-uploader"
                                                     name="cardPhoto1"
                                                     id="cardPhoto1"
                                                     action="/exchangeApi/common/upload-photo/private"
                                                     v-on:onFileClick="onFileClick"
                                                     v-on:deleteFile="deleteFile"
                                                     v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                        </file-upload>
                                        <div class="ui-tip" v-if="cardPhoto1Tip">{{ $t('common.uploadTip') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label class="required">*</label><label>{{ $t('certification.verify.identity.passportPhoto') }}:</label>
                            </div>
                            <div class="col-input col-idcard">
                                <img class="idcard-left" :src="cardHandholdSrc"  alt="" width="200">
                                <div class="idcard-right">
                                    <div class="file-container">
                                        <file-upload class="my-file-uploader"
                                                     name="cardHandhold"
                                                     id="cardHandhold"
                                                     action="/exchangeApi/common/upload-photo/private"
                                                     v-on:onFileClick="onFileClick"
                                                     v-on:deleteFile="deleteFile"
                                                     v-on:onFileUpload="onFileUpload">↑{{ $t('common.upload') }}
                                        </file-upload>
                                        <div class="ui-tip" v-if="cardHandholdTip">{{ $t('common.uploadTip') }}</div>
                                    </div>

                                    <p class="col-p">手持證件照片您需要了解：</p>
                                    <p class="col-p">您需要手持有效的中國證件原件和寫明平台名稱、當時時間的字條進行照片拍攝</p>
                                    <p class="col-p">照片要清晰地顯示您的臉，確保不被遮擋、證件號碼必須清楚可讀</p>
                                    <p class="col-p">圖像須為高分辨率，但不能超過2MB</p>
                                    <p class="col-p">您可以上傳JPG\JPEG\PNG\BMP\PDF格式的文件，任何不清楚、篡改過、低分辨率或質量差的圖像都將被拒絕。</p>
                                </div>
                            </div>
                        </div>
                    </template>

                    <div class="col-row">
                        <div class="col-label">&nbsp;</div>
                        <div class="col-input col-check">
                            <label>
                                <input type="checkbox"
                                       class="check-left"
                                       name="agree"
                                       id="agree"
                                       @change="changeAgree">
                                <p class="col-p check-right">{{ $tc('certification.verify.identity.promiseTip', 1) }}
                                    {{ $tc('certification.verify.identity.promiseTip', 2) }}</p>

                            </label>
                        </div>
                    </div>

                    <div class="col-row col-row--btns">
                        <div class="col-label">
                            <label>&nbsp;</label>
                        </div>
                        <div class="col-text">
                            <button type="submit"
                                    class="ui-btn ui-btn--block"
                                    v-if="isRequesting === false"
                                    :disabled='!form.agree'
                                    @click="submit()">{{ $t('common.confirm') }}
                            </button>
                            <button type="submit"
                                    class="ui-btn  ui-btn--block"
                                    disabled
                                    v-if="isRequesting === true">{{ $t('common.waiting') }}...
                            </button>
                        </div>
                    </div>
                </form>
            </validator>
        </div>
    </div>
</article>